<template>
  <div class="permissionSetting">
    <!-- 权限设置 -->
    <div class="creatAccount" v-if="role==='1'">
      <div class="chooseContainer padding-box">
        <el-input placeholder="空间名称" v-model="spaceName" class="chooseBox"></el-input>
        <el-input placeholder="输入手机号" v-model="mobile" class="chooseBox"></el-input>
        <div class="btnBox">
          <el-button type="primary" @click="creatUser">生成账号</el-button>
        </div>
      </div>
      <div class="padding-box">
        <el-table :data="userData" style="width: 100%" v-loading="loadingTable"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)" empty-text="暂无数据">
          <el-table-column prop="spaceName" label="空间名称" min-width="120" align="center">
          </el-table-column>
          <el-table-column prop="loginDate" label="最近登陆时间" min-width="120" align="center">
          </el-table-column>
          <el-table-column prop="loginIp" label="最近登陆IP" min-width="120" align="center">
          </el-table-column>
          <el-table-column prop="mobile" label="手机号" min-width="120" align="center">
          </el-table-column>
          <el-table-column prop="createTime" :formatter="dateFormat" label="生成时间" min-width="120" align="center">
          </el-table-column>
          <el-table-column label="操作" min-width="80" align="center">
            <template slot-scope="scope">
              <!-- <el-button type="text" @click="updateTel(scope.row)" size="mini">修改手机号</el-button> -->
              <el-button type="text" size="mini" @click="deleteConsumer(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pageContainer" style="padding-bottom:30px">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="this.pageSizeArray" :page-size="this.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="this.total">
          </el-pagination>
        </div>
      </div>
      <el-dialog title="生成空间账号" :visible.sync="dialogVisible" :modal="zhezhao" width="30%">
        <span>空间名称:{{spaceName}}</span><br>
        <span>账号:{{mobile}}</span><br>
        <span>密码:{{password}}</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="删除账号" :visible.sync="dialogVisibleDel" :modal="zhezhao" width="30%">
        <span>是否删除该账号</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleDel = false">取消</el-button>
          <el-button type="primary" @click="delDialog">确定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="creatAccount" v-if="role==='2'">
      <span>您没有权限查看</span>
    </div>
    <version></version>
  </div>
</template>
<script type="text/ecmascript-6">
import version from '@/base/version/version'
// import { pageCommon } from '@/assets/js/mixin'
import { mapGetters } from 'vuex'
export default {
  name: 'permissionSetting',
  components: {
    version
  },
  // mixins: [pageCommon],
  data () {
    return {
      mobile: '',
      spaceName: '',
      password: '',
      zhezhao: false,
      pageSizeArray: [10, 20, 30, 40, 50],
      pageNo: 1,
      pageSize: 10,
      pageTotal: null,
      dialogVisibleDel: false,
      loadingList: false,
      total: 0,
      dialogVisible: false,
      loadingTable: true,
      userData: []
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  watch: {
    pageSize (newVal, oldVal) {
      if (this.pageTotal > newVal) {
        this.getUserList()
        return false
      }
      if (this.pageTotal < oldVal) {
        return false
      }
      this.getUserList()
    },
    total (val) {
      if (val === 1) {
        this.isShowPage = false
      } else {
        this.isShowPage = true
      }
    }
  },
  created () {
    this.getUserList()
    this.role = this.userInfo.roleId
    console.log(this.userInfo.roleId)
  },
  methods: {
    // 修改每页显示的数据数目
    handleSizeChange (val) {
      this.pageSize = val
      this.getUserList()
    },
    // 设置pageNo
    handleCurrentChange (val) {
      this.pageNo = val
      this.getUserList()
    },
    creatUser () {
      this.dialogVisible = true
      this.$axios.post('/api/sysUser/addSpaceAccount', {
        userId: this.userInfo.userId,
        spaceName: this.spaceName,
        mobile: this.mobile
      }).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          let datas = res.data
          console.log(datas)
          this.password = datas[0].password
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    getUserList () {
      this.$axios.post('/api/sysUser/showAllStoreUser', {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          this.loadingTable = false
          let arr = res.users
          console.log(arr)
          let userList = []
          for (let i = 0; i < arr.length; i++) {
            userList.push({
              id: arr[i].id,
              spaceName: arr[i].spaceName,
              mobile: arr[i].mobile,
              createTime: arr[i].createTime,
              loginIp: arr[i].loginIp,
              loginDate: arr[i].loginDate
            })
          }
          this.userData = [...userList]
          this.total = res.total
        }
      })
    },
    deleteConsumer (row) {
      this.dialogVisibleDel = true
      this.id = row.id
    },
    delDialog (row) {
      this.$axios.post('/api/sysUser/deleteSysUserById', {
        id: this.id,
        userId: this.userInfo.userId
      }).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getUserList()
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
      this.dialogVisibleDel = false
    },
    dateFormat (row, column) {
      var date = row.createTime.substring(0, 10) + ' ' + row.createTime.substring(11, 19)
      return date
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../../assets/stylus/variable'
.edition
  margin-left 44%
  margin-bottom 20px
  color #999
  font-size 12px
.chooseContainer
  background $bg-normal
  overflow hidden
  display flex
  width 100%
  padding $spacing
  padding-bottom 20px
  flex-wrap wrap
  box-sizing border-box
  .chooseBox
    flex 0 0 224px
    margin-right $spacing
    margin-bottom $spacing
</style>
